<template>
  <div>
    <el-form ref="form" :model="form" label-width="130px" disabled>
      <el-form-item v-if="type === 0" label="景区名称：">
        <el-input v-model="form.siteName" placeholder="请输入" disabled clearable />
      </el-form-item>
      <el-form-item v-if="type === 1" label="所属项目：" prop="locationId">
        <el-select v-model="form.locationId" placeholder="请选择" clearable>
          <el-option v-for="item in projectList" :key="item.id" :value="item.id" :label="item.name" />
        </el-select>
      </el-form-item>
      <el-form-item label="票名称：" prop="name">
        <el-input v-model="form.name" placeholder="请输入" clearable />
      </el-form-item>
      <el-form-item label="票说明：">
        <el-input v-model="form.illustrate" type="textarea" rows="5" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="游玩须知：" prop="playInstructions">
        <el-input v-model="form.playInstructions" type="textarea" rows="5" placeholder="请输入" />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>

import { getProjectList } from '@/api/common'

export default {
  name: 'Step1',
  components: {},
  props: {
    type: {
      type: [Number, String],
      default: 0
    },
    formDetail: {
      type: Object,
      default: () => ({})
    }
  },

  data() {
    return {
      form: {
        siteName: '',
        locationId: '',
        name: '',
        illustrate: '',
        playInstructions: ''
      },
      projectList: []
    }
  },

  created() {
    const { type, siteId, siteName, locationId, name, illustrate, playInstructions } = this.formDetail
    if (type === 1) {
      const data = {
        draft: false,
        siteId
      }
      this.getProjectList(data)
    }
    this.form = {
      siteName,
      locationId,
      name,
      illustrate,
      playInstructions
    }
  },

  methods: {
    getProjectList(data) {
      getProjectList(data).then(res => {
        this.projectList = res || []
      }).catch(() => {
      })
    }
  }
}
</script>
<style lang="scss" scoped></style>
